<!DOCTYPE html>
<html>
<head>
	<title>支付宝 支付托！</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="icon" href="images/icon.png" type="image/x-icon">
</head>
<body style="overflow:hidden;">
	<!-- 头部 -->
	<div id="header">
		<!-- 黑色区域 -->
		<div id="head">
			<div class="headContent">
				<div>
					<a href=""  class="textColorChange headContent-left" style="color: rgb(3,173,221);">个人</a>
					<a href=""  class="textColorChange headContent-left">企业</a>
					<a href=""  class="textColorChange ">合作伙伴</a>
				</div>
				<div>
					<ul>
						<li>
							<a href=""  class="textColorChange">支付宝App</a>
						</li>
						<li> | </li>
						<li>
							<a href=""  class="textColorChange" id="rotate">客服服务 <i class="triangleIcon"></i></a>
							<div class="head-downList" onmouseover="triangleMouseOver()" onmouseout="triangleMouseOut()">
								<div>服务大厅</div>
								<div>自助服务</div>
								<div>提建议</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 菜单，导航栏区域 -->
		<div id="menu">
			<div id="menuFrame">
				<a href=""><img src="images/alipay.png"></a>
				<div id="menuContent">
					<!-- 菜单 -->
					<ul>
						<li>
							<a href="javascript:;" class="menuContent-li-a thisPage">首页</a>
						</li>
						<li>
							<a href="javascript:;" class="menuContent-li-a" onclick="openList(0)">财富中心</a>
							<!-- 下拉框 -->
							<div class="downList">
								<div class="downList1" onclick="closeList(0)">
									<span> X </span>
								</div>
								<div class="downList2">
									<div>余额宝</div>
									<div>招财宝</div>
									<div>存钱宝</div>
									<div>淘理财</div>
									<div>蚂蚁达客</div>
								</div>
								<div class="downList3">
									<span>财富中心</span>
								</div>
							</div>
						</li>
						<li>
							<a href="javascript:;" class="menuContent-li-a" onclick="openList(1)">安全保障</a>
							<!-- 下拉框 -->
							<div class="downList">
								<div class="downList1" onclick="closeList(1)">
									<span> X </span>
								</div>
								<div class="downList2">
									<div>安全中心</div>
									<div>会员保障</div>
								</div>
								<div class="downList3">
									<span>安全保障</span>
								</div>
							</div>
						</li>
						<li> | </li>
						<li>
							<a href="javascript:;" class="menuContent-li-a" onclick="openList(2)">商家中心</a>
							<!-- 下拉框 -->
							<div class="downList">
								<div class="downList1" onclick="closeList(1)">
									<span> X </span>
								</div>
								<div class="downList2">
									<div>支付宝商家</div>
									<div>口碑商家</div>
								</div>
								<div class="downList3">
									<span>商家中心</span>
								</div>
							</div>
						</li>
						<li>
							<a href="html/antIndex.html" class="menuContent-li-a">开放平台</a>
						</li>
					</ul>
					<div id="menu-reg">
						<a href="html/login.html" class="menu-reg1">登录</a>
						<a href="html/reg.html" class="menu-reg2">注册</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 主体 -->
	<div id="mainBody">
		<!-- 第一个界面 -->
		<div id="mainPage">
			<!-- 视频区域 -->
			<div class="videoarea">
				<!-- 视频元素 -->
				<video id="video" class="videoBlock" muted autoplay  poster="images/poster.jpg">
					<source src="images/video.mp4" type="video/mp4">
					</video>
					<!-- 视频的面纱 -->
					<div class="mask"></div>
					<!-- 定格指向画面 -->
					<div id="video-poster"></div>
				</div>
				<!-- 界面上的内容 -->
				<div class="main-content">
					<div class="video-content-mid">
						<div class="video-content-logo"></div>
						<div class="video-content-button">
							<div><a href="html/login.html" class="login">登录</a></div>
							<div><a href="html/reg.html" class="reg">立即注册</a></div>
						</div>
						<i id="videoStart" onclick="startVideo()"></i>
					</div>
				</div>
			</div>
			<!-- 第二个界面 -->
			<div id="page2" class="mp-bg-fw mp-bg-co">
				<!-- 界面的背景 -->
				<div class="mp-bg-img mp-bg-co mp-bg-2"></div>
				<!-- 界面内容 -->
				<div class="main-content">
					<img src="images/index-page2-1.png" class="words page2-words">
					<img src="images/index-page2-2.png" class="people">
					<img src="images/index-page2-3.png" class="cloud1">
					<img src="images/index-page2-4.png" class="cloud2">
				</div>
				<!-- 界面的尾部 -->
				<div class="page-foot">
					<div><i class="doller"></i></div>
					<div><span class="page-foot-span1"> | </span></div>
					<div>
						<div><span class="page-foot-span2">转账付款</span></div>
						<div><span class="page-foot-span3">转到支付宝账户，瞬间到账 | 转到银行卡，2小时到账</span></div>
					</div>
				</div>
			</div>
			<!-- 第三个界面 -->
			<div id="page3" class="mp-bg-fw mp-bg-co">
				<div class="mp-bg-img mp-bg-co mp-bg-3"></div>
				<div class="main-content">
					<img src="images/index-page3-1.png" class="words page3-words">
					<img src="images/index-page3-2.png" class="hand1">
					<img src="images/index-page3-3.png" class="hand2">
				</div>
				<div class="page-foot justify-around">
					<div class="justify-start">
						<div><i class="doller"></i></div>
						<div><span class="page-foot-span1"> | </span></div>
						<div>
							<div><span class="page-foot-span2">扫描二维码或条码付款</span></div>
							<div><span class="page-foot-span3">自动识别不安全链接，安心付款</span></div>
						</div>
					</div>
					<div class="justify-start">
						<div><i class="doller"></i></div>
						<div><span class="page-foot-span1"> | </span></div>
						<div>
							<div><span class="page-foot-span2">出示付款码付款</span></div>
							<div><span class="page-foot-span3">付款码每次不同，保障付款安全</span></div>
						</div>
					</div>
					<div class="justify-start">
						<div><i class="doller"></i></div>
						<div><span class="page-foot-span1"> | </span></div>
						<div>
							<div><span class="page-foot-span2">通过声波收付款</span></div>
							<div><span class="page-foot-span3">没有网络也能收款付款</span></div>
						</div>
					</div>
				</div>
			</div>
			<!-- 第四个界面 -->
			<div id="page4" class="mp-bg-fw mp-bg-co">
				<div class="mp-bg-img mp-bg-co mp-bg-4"></div>
				<div class="main-content">
					<img src="images/index-page4-1.png" class="words page4-words">
				</div>
				<div class="page-foot justify-around">
					<div class="justify-start">
						<div><i class="doller"></i></div>
						<div><span class="page-foot-span1"> | </span></div>
						<div>
							<div><span class="page-foot-span2">国际运输</span></div>
							<div><span class="page-foot-span3">如淘宝购物般简单，无需办理转运</span></div>
						</div>
					</div>
					<div class="justify-start">
						<div><i class="doller"></i></div>
						<div><span class="page-foot-span1"> | </span></div>
						<div>
							<div><span class="page-foot-span2">品牌正品</span></div>
							<div><span class="page-foot-span3">海外商家直发，100%正品保证</span></div>
						</div>
					</div>
					<div class="justify-start">
						<div><i class="doller"></i></div>
						<div><span class="page-foot-span1"> | </span></div>
						<div>
							<div><span class="page-foot-span2">人民币付款</span></div>
							<div><span class="page-foot-span3">无需外币兑换费，无需双币种信用卡</span></div>
						</div>
					</div>
				</div>
			</div>
			<!-- 第五个界面 -->
			<div id="page5" class="mp-bg-fw mp-bg-co">
				<div class="mp-bg-img mp-bg-co mp-bg-5"></div>
				<div class="mask"></div>
				<div class="main-content">
					<img src="images/index-page5-1.png" class="words page5-words">
				</div>
				<div class="page-foot justify-around">
					<div class="justify-start">
						<div><i class="doller"></i></div>
						<div><span class="page-foot-span1"> | </span></div>
						<div>
							<div><span class="page-foot-span2">赚的更多</span></div>
							<div><span class="page-foot-span3">定期稳定收益，让你赚更多</span></div>
						</div>
					</div>
					<div class="justify-start">
						<div><i class="doller"></i></div>
						<div><span class="page-foot-span1"> | </span></div>
						<div>
							<div><span class="page-foot-span2">安全保障</span></div>
							<div><span class="page-foot-span3">权威金融机构负责风险管理</span></div>
						</div>
					</div>
					<div class="justify-start">
						<div><i class="doller"></i></div>
						<div><span class="page-foot-span1"> | </span></div>
						<div>
							<div><span class="page-foot-span2">买的方便</span></div>
							<div><span class="page-foot-span3">一键购买，坐享收益</span></div>
						</div>
					</div>
				</div>
			</div>
			<!-- 第六个界面 -->
			<div id="page6" class="mp-bg-fw mp-bg-co">
				<div class="mp-bg-img mp-bg-co mp-bg-6"></div>
				<div class="main-content">
					<img src="images/index-page6-1.png" class="words page6-words">
				</div>
				<div class="page-foot justify-around">
					<div class="justify-start">
						<div><i class="doller"></i></div>
						<div><span class="page-foot-span1"> | </span></div>
						<div>
							<div><span class="page-foot-span2">挂号</span></div>
							<div><span class="page-foot-span3">余号查询，足不出户就能挂号</span></div>
						</div>
					</div>
					<div class="justify-start">
						<div><i class="doller"></i></div>
						<div><span class="page-foot-span1"> | </span></div>
						<div>
							<div><span class="page-foot-span2">智能导诊</span></div>
							<div><span class="page-foot-span3">叫号与导航，按时到达科室不迷路</span></div>
						</div>
					</div>
					<div class="justify-start">
						<div><i class="doller"></i></div>
						<div><span class="page-foot-span1"> | </span></div>
						<div>
							<div><span class="page-foot-span2">付医药费</span></div>
							<div><span class="page-foot-span3">手机支付，各类医药费边走边付</span></div>
						</div>
					</div>
					<div class="justify-start">
						<div><i class="doller"></i></div>
						<div><span class="page-foot-span1"> | </span></div>
						<div>
							<div><span class="page-foot-span2">查看报告</span></div>
							<div><span class="page-foot-span3">消息通知，随时查看就诊报告</span></div>
						</div>
					</div>
				</div>
			</div>
			<!-- 第七个界面，总尾部 -->
			<div class="mp-bg-fw mp-bg-co">
				<div class="mp-bg-img mp-bg-co mp-bg-7">
					<div class="foot1">
						<div class="foot1-1 foot1-1-1">
							<div class="foot1-1-co">
								<div>
									<img src="images/foot1-1-1.png">
									<span>付款，是件容易的事</span>
								</div>
								<div>
									<a href="javascript:;">付款方式</a> |
									<a href="javascript:;">134家金融机构</a>
								</div>
							</div>
							<div class="foot1-1-co">
								<div>
									<img src="images/foot1-1-2.png">
									<span>会员保障，安心付款</span>
								</div>
								<a href="javascript:;">安全升级</a> |
								<a href="javascript:;">应急服务</a> |
								<a href="javascript:;">理赔服务</a>
							</div>
							<div class="foot1-1-co">
								<div>
									<img src="images/foot1-1-3.png">
									<span>海外商品，想购就购</span>
								</div>
								<a href="javascript:;">全球直购</a> |
								<a href="javascript:;">海外直购</a>
							</div>
							<div class="foot1-1-co">
								<div>
									<img src="images/foot1-1-4.png">
									<span>玩转支付宝</span>
								</div>
								<a href="javascript:;">如何购物</a> |
								<a href="javascript:;">新手须知</a> |
								<a href="javascript:;">我要开店</a>
							</div>
						</div>
						<div class="foot1-1 foot1-1-2">
							<div class="foot1-1-co">
								<div>
									<a href="javascript:;">支付宝收费规则</a> |
									<a href="javascript:;">支付宝服务协议</a>
								</div>
								<div>
									<a href="javascript:;">支付宝隐私权政策</a> |
									<a href="javascript:;">蚂蚁金服客户权益保障承诺书</a>
								</div>
								<div>
									<span>公告</span>
									<a href="javascript:;">支付宝服务协议的更新公告</a> 
								</div>
								<div>
									<a href="javascript:;">《关于防范和打击电信网络诈骗</a>...
								</div>
							</div>
							<div class="foot1-1-co">
								<a href="javascript:;">支付宝官方微博</a>
								<a href="javascript:;">+关注</a>
							</div>
							<div class="foot1-1-co">
								<a href="javascript:;">下载支付宝</a>
								<div>
									<img src="images/foot1-1-5.png">
								</div>
							</div>
							<div class="foot1-1-co">
								<div>
									<span>支付宝E公益</span>
								</div>
								<span>帮助听力障碍儿童献爱心</span>
								<a href="javascript:;" class="foot1-1-2-a" style="color: #fff;">立即查看</a>
							</div>
						</div>
					</div>
					<div class="foot2">
						<div class="foot2-1">
							<div>
								<a href="javascript:;">诚征英才</a> | <a href="javascript:;">联系我们</a> | <a href="javascript:;">International BusinessICP证号：沪B2-20150087</a>
							</div>
							<div>
								<a href="javascript:;">蚂蚁金服集团</a> | <a href="javascript:;">支付宝</a> | <a href="javascript:;">余额宝</a> | <a href="javascript:;">招财宝</a> | <a href="javascript:;">芝麻信用</a> | <a href="javascript:;">蚂蚁微贷</a> | <a href="javascript:;">网商银行</a> | <a href="javascript:;">蚂蚁达客</a> 
							</div>
							<div>
								<a href="javascript:;">阿里巴巴集团</a> | <a href="javascript:;">淘宝网</a> | <a href="javascript:;">天猫</a> | <a href="javascript:;">聚划算</a> | <a href="javascript:;">全球速卖通</a> | <a href="javascript:;">阿里巴巴国际交易市场</a> | <a href="javascript:;">1688</a> | <a href="javascript:;">阿里妈妈</a> | <a href="javascript:;">阿里旅行·去啊</a> | <a href="javascript:;">阿里云计算</a> | <a href="javascript:;">AliOS</a> | <a href="javascript:;">阿里通信</a> | <a href="javascript:;">万网</a> | <a href="javascript:;">高德</a> | <a href="javascript:;">优视</a> | <a href="javascript:;">友盟</a> | <a href="javascript:;">虾米</a> | <a href="javascript:;">天天动听</a> | <a href="javascript:;">来往</a> | <a href="javascript:;">钉钉</a>
							</div>
							<div class="foot2-2 justify-start">
								<div><a href="javascript:;"><img src="images/foot2-1.png"></a></div>
								<div><a href="javascript:;"><img src="images/foot2-2.png"></a></div>
								<div><a href="javascript:;"><img src="images/foot2-3.png"></a></div>
								<div><a href="javascript:;"><img src="images/foot2-4.png"></a></div>
								<div><a href="javascript:;"><img src="images/foot2-5.png"></a></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 网页的下箭头 -->
		<i id="downIcon" onclick="next()"></i>
		<!-- 右边的切换按钮 -->
		<div id="btn">
			<i class="index-btn btn-isOn" onclick="clickBtn(0)"></i>
			<i class="index-btn" onclick="clickBtn(1)"></i>
			<i class="index-btn" onclick="clickBtn(2)"></i>
			<i class="index-btn" onclick="clickBtn(3)"></i>
			<i class="index-btn" onclick="clickBtn(4)"></i>
			<i class="index-btn" onclick="clickBtn(5)"></i>
			<i class="index-btn" onclick="clickBtn(6)"></i>
		</div>
		<!-- js文件 -->
		<script type="text/javascript" src="js/common.js" async></script>
		<script type="text/javascript" src="js/index.js" async></script>
	</body>
	</html>